<!-- extends表明此页面继承自 base.html 文件 -->
{% extends "base.html" %}
{% load staticfiles %}

<!-- 写入 base.html 中定义的 title -->
{% block title %}
    文章详细
{% endblock title %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}

<!-- 定义放置文章详情的div容器 -->
<div class="container">
    <div class="row">
        <!--//标题即作者-->
        <h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>
         <div class="col-12 alert alert-success"><div>
                作者：{{ article.author }}
                {% if user == article.author %}
                    · <a href="#" onclick="confirm_safe_delete()">删除文章</a>
                    · <a href="{% url 'article:article_update' article.id %}">
                        编辑文章
                    </a>
                {% endif %}
            </div>
            <div>
                浏览：{{ article.total_views }}
            </div>

            <form
                  style="display:none;"
                  id="safe_delete"
                  action="{% url 'article:article_safe_delete' article.id %}"
                  method="POST"
                  >
                {% csrf_token %}
                <button type="submit">发送</button>
            </form>
         </div>
        <!-- 文章正文 -->
        <div class="col-12">
            <p>{{ article.body|safe }}</p>
        </div>
        <!-- 发表评论 -->
        <hr>
        {% if user.is_authenticated %}
            <div>
                <form
                    action="{% url 'comment:post_comment' article.id %}"
                    method="POST"
                >
                {% csrf_token %}
                    <div class="form-group">
                        <label for="body">
                            <strong>
                                我也要发言：
                            </strong>
                        </label>
                        <textarea
                            type="text"
                            class="form-control"
                            id="body"
                            name="body"
                            rows="2"></textarea>
                    </div>
                    <!-- 提交按钮 -->
                    <button type="submit" class="btn btn-primary ">发送</button>
                </form>
            </div>
            <br>
        {% else %}
            <br>
            <h5 class="row justify-content-center">
                请<a href="{% url 'userprofile:login' %}">登录</a>后回复
            </h5>
            <br>
        {% endif %}


    </div>
        <!-- 显示评论 -->
        <h4>共有{{ comments.count }}条评论</h4>
        <div>
            {% for comment in comments %}
                <hr>
                <p>
                    <strong style="color: pink">
                        {{ comment.user }}
                    </strong> 于
                    <span style="color: green">
                        {{ comment.created|date:"Y-m-d H:i:s" }}
                    </span> 时说：
                </p>
                <pre style="font-family: inherit; font-size: 1em;">
            {{ comment.body }}</pre>
            {% endfor %}
        </div>
  

</div>

<script>
    <!--// 删除文章的函数-->
    function confirm_safe_delete() {
        // <!--// 调用layer弹窗组件-->
        layer.open({
            // <!--// 弹窗标题-->
            title: "确认删除",
            // <!--// 正文-->
            content: "确认删除这篇文章吗？",
            // <!--// 点击确定按钮后调用的回调函数-->
            yes: function(index, layero) {
            $('form#safe_delete button').click();
            layer.close(index);
        }
        })
    }
</script>

{% endblock content %}